<template>
  <button @click="handleClick" :class="btnClass"><slot></slot></button>
</template>
<script>
  export default {
    name: "MyButton",
    components: {},
    props: {
      showBg: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {};
    },
    created() {},
    mounted() {},
    computed: {
      btnClass() {
        return this.showBg ? "button" : "button2";
      },
    },
    watch: {},
    methods: {
      handleClick(env) {
        this.$emit("click", env);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .button {
    color: $titleColor;
    background-color: $btnBackgroundColor;
    border-color: $btnBorderColor;
    border: none;
    border: 1px solid $hoverColor;
    border-radius: 5px;
    padding: 8.5px 45px;
    cursor: pointer;
    transition: 0.2s;
    line-height: 26px;
    box-sizing: border-box;
    &:hover {
      box-sizing: border-box;
      background-color: transparent;
    }
  }
  .button2 {
    color: $titleColor;
    background-color: transparent;
    border-color: $btnBorderColor;
    border: none;
    border: 1px solid $hoverColor;
    border-radius: 5px;
    padding: 8.5px 45px;
    cursor: pointer;
    transition: 0.2s;
    line-height: 26px;
    box-sizing: border-box;
    &:hover {
      box-sizing: border-box;
      background-color: $hoverColor;
    }
  }
  @media screen and (max-width: 768px) {
    .button,
    .button2 {
      padding: 6px 35px;
      font-size: 14px;
    }
  }
  @media screen and (max-width: 568px) {
    .button,
    .button2 {
      padding: 4px 25px;
      font-size: 12px;
    }
  }
  @media screen and (max-width: 320px) {
    .button,
    .button2 {
      padding: 2px 15px;
      font-size: 12px;
    }
  }
</style>
